<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上元商城-主页</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.0/swiper-bundle.min.css" rel="stylesheet">
    <!-- 引入主页less -->
    <link rel="stylesheet/less" href="./css/index.less">
    <!-- 
      字体图标:  以字体的形式区表现图片 
            1. 更节约空间 
            2. 字体图标无限放大 不会失真 
            3. 使用场景 有一定含义的小图标  
      图片:
            1. 浪费空间 
            2. 图片放大 可能会失真
     -->
</head>

<body>

    <div class="head clearBox">
        <div class="head-home fl">
            <span class="iconfont icon-shouye"></span>
        </div>
        <div class="head-search fl">
            <input type="text" placeholder="游戏主机">
            <ul class="clearBox">
                <li class="fl">
                    <img src="img/buy-logo.png">
                </li>
                <li class="line fl"></li>
                <li class="fl">
                    <span class="iconfont icon-dizhi"></span>
                </li>
            </ul>
        </div>
        <div class="head-login fl">
            <a href="#">登录</a>
        </div>
    </div>

    <div class="container">
        <!-- 轮播 -->
        <div class="swiper-container view">
            <div class="swiper-wrapper" id="swiper">
                <script type="text/html" id="swiper-template">
                    {{each swipers}}
                    <div class="swiper-slide">
                        <!-- 锚点定位写法 -->
                        <a href="./item.html#{{$value.id}}">
                            <img src="{{$value.image}}">
                        </a>
                    </div>
                    {{/each}}
                </script>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>


        </div>

        <!-- 导航 -->
        <div class="nav">
            <div class="nav-box" id="nav">
                <script type="text/html" id="nav-template">
                    <!-- 广告数据 -->
                <div class="nav-box-top">
                    <a href="#">
                        <img src="{{adv.PICTURE_ADDRESS}}">
                    </a>
                </div>
                <!-- nav 数据 -->
                <ul class="nav-box-bottom clearBox">
                    {{each navs nav index}}
                    <li>
                        <a href="#">
                            <img src="{{nav.image}}" />
                            <p>{{nav.mallCategoryName}}</p>
                        </a>
                    </li>
                    {{/each}}
                </ul>

                </script>

            </div>
        </div>
        <!-- 秒杀 -->
        <div class="kill">
            <div class="kill-top clearBox">
                <div class="kill-top-img fl"></div>
                <div class="kill-top-title fl">京东秒杀</div>
                <ul class="kill-top-time clearBox fl">
                    <li>1</li>
                    <li>2</li>
                    <li>:</li>
                    <li>1</li>
                    <li>2</li>
                    <li>:</li>
                    <li>0</li>
                    <li>0</li>
                </ul>
                <div class="kill-top-more fr">
                    <a href="#">更多秒杀<span class="iconfont icon-youjiantou-copy"></span></a>
                </div>
            </div>

            <div class="swiper-container kill-bottom">
                <div class="swiper-wrapper" id="hot">
                    <script type="text/html" id="hot-template">
                        {{each hots}}
                        <div class="swiper-slide">
                            <div>

                                <a href="./item.html#{{$value.id}}">
                                    <img src="{{$value.image}}">
                                </a>
                            </div>
                            <p class="price-current">{{$value.mallPrice.toFixed(2)}}</p>
                            <p class="price-old">{{$value.price.toFixed(2)}}</p>
                        </div>
                        {{/each}}
                    </script>

                </div>

            </div>

        </div>

        <div id="floor">
            <script type="text/html" id="floor-template">
                <!-- 楼层区 -->
            <div class="floor">

                <div class="floor-top">
                    <h3>{{floor3}}</h3>
                </div>
                <div class="floor-bottom">
                    <!-- 容器大的容器 -->
                    <div class="box clearBox">
                        <div class="h100 rb fl">
                            <a href="./item.html#{{floor01[0].id}}">
                                <img src="{{floor01[0].image}}">
                            </a>
                        </div>
                        <div class="h100 fl">
                            <div class="h50 bb">
                                <a href="./item.html#{{floor01[1].id}}">
                                    <img src="{{floor01[1].image}}">
                                </a>
                            </div>
                            <div class="h50">
                                <a href="./item.html#{{floor01[2].id}}">
                                    <img src="{{floor01[2].image}}">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="floor">
                <div class="floor-top">
                    <h3>葡萄美酒</h3>
                </div>
                <div class="floor-bottom">
                    <!-- 容器大的容器 -->
                    <div class="box clearBox">

                        <div class="h100 rb fl">
                            <div class="h50 bb">
                                <a href="./item.html#{{floor02[0].id}}">
                                    <img src="{{floor02[0].image}}">
                                </a>
                            </div>
                            <div class="h50">
                                <a href="./item.html#{{floor02[1].id}}">
                                    <img src="{{floor02[1].image}}">
                                </a>
                            </div>
                        </div>
                        <div class="h100  fl">
                            <a href="./item.html#{{floor02[2].id}}">
                                <img src="{{floor02[2].image}}">
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="floor">
                <div class="floor-top">
                    <h3>热带水果</h3>
                </div>
                <div class="floor-bottom">
                    <!-- 容器大的容器 -->
                    <div class="box clearBox">
                        <div class="h100 fl">
                            <div class="h50 rb bb">
                                <a href="./item.html#{{floor03[0].id}}">
                                    <img src="{{floor03[0].image}}">
                                </a>
                            </div>

                            <div class="h50 rb">
                                <a href="./item.html#{{floor03[1].id}}">
                                    <img src="{{floor03[1].image}}">
                                </a>
                            </div>
                        </div>

                        <div class="h100 fl">
                            <div class="h50 bb">
                                <a href="./item.html#{{floor03[2].id}}">
                                    <img src="{{floor03[2].image}}">
                                </a>
                            </div>
                            <div class="h50">
                                <a href="#">
                                    <img src="img/cp7.jpg">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </script>

        </div>



    </div>

    <ul class="foot clearBox">
        <li>
            <a href="./index.html">
                <span class="iconfont icon-shouye"></span>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="./list.html">
                <span class="iconfont icon-liebiao"></span>
                <p>列表</p>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="iconfont icon-gouwuche"></span>
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="iconfont icon-qita"></span>
                <p>其他</p>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="iconfont icon-huiyuanzhongxin"></span>
                <p>会员

                </p>
            </a>
        </li>
    </ul>




    <script src="./js/iconfont.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.0/swiper-bundle.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.js">
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/2.5.3/less.js"></script>




    <script type="module">

        import $$ from "./common/js/myTools.js"
        const {baseURL,getNode} = $$
     
        function loadSwiperData() {
             // 轮播区域
             new Swiper('.view', {
                    loop: true,
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    speed: 300,
            
                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                        // type: 'fraction',
                        bulletClass : 'my-bullet',
                        bulletActiveClass: 'my-bullet-active',
                    },

                })

        }

        function loadKillData() {
             // 秒杀区域
            new Swiper('.kill-bottom', {
                loop: true,
                autoplay: {
                    delay: 2000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                slidesPerView: 3,
                centeredSlides: true,
                centeredSlidesBounds: true,
                slidesPerGroup : 3,
            })

        }

        /**
         *  加载轮播图区域
         */
        function loadSwiper() {
            /*
              改变this的指向
            */
            $$.myAjax({
                url:`${baseURL}/slides`,
                dataType:"json"
            }).then(data => {
                // console.log(data);
                const html = template("swiper-template",{swipers:data})
                const swiperNode = getNode("#swiper")
                swiperNode.innerHTML = html;
                loadSwiperData()
            })
            
        }
      
        /*
          加载nav 区域 
        */
       async function loadNav() {
             const adv =  await $$.myAjax({
                  url:`${baseURL}/advertesPicture`,
                  dataType:"json"
              })
              const navs =  await $$.myAjax({
                  url:`${baseURL}/nav`,
                  dataType:"json"
              })

              const html = template("nav-template",{adv,navs})
              const navNode = getNode("#nav")
              navNode.innerHTML = html;

       }
        
       /*
         加载热门商品
       */
      async  function loadHot() {
       // http://localhost:3000/kill
         const hots =  await $$.myAjax({
                  url:`${baseURL}/kill`,
                  dataType:"json"
              })


          const html = template("hot-template",{hots})
        
          const hotNode = getNode("#hot");
          hotNode.innerHTML = html;
          loadKillData();
      }
       

       /*加载楼层信息*/ 
       //http://localhost:3000/floorName

      async  function loadFloor(){
     
             const floorTitles =  await $$.myAjax({
                  url:`${baseURL}/floorName`,
                  dataType:"json"
              })
              // 1楼
              const floor01 =  await $$.myAjax({
                  url:`${baseURL}/floor1`,
                  dataType:"json"
              })
            //   console.log(floor01);
              // 2楼
              const floor02 =  await $$.myAjax({
                  url:`${baseURL}/floor2`,
                  dataType:"json"
              })
              // 3楼
              const floor03 =  await $$.myAjax({
                  url:`${baseURL}/floor3`,
                  dataType:"json"
              })
            //   这里一定要合并 不然因为0,1,2,3 4，会合并
            const floorData={
                  floor01,floor02,floor03
            }
         
            const data={...floorData,...floorTitles}
// console.log(data);
    const html =template("floor-template",data);
    const floorNode=getNode("#floor");
    floorNode.innerHTML=html;
}

       loadSwiper();
       loadNav();
       loadHot();
       loadFloor();
    
       
       
    </script>

</body>

</html>